<template>
  <div class="login container">
    <van-nav-bar title="登陆" left-arrow @click-left="onClickLeft" />
    <!-- 登陆页面 -->
    <van-form @submit="setLoginForm">
      <van-cell-group inset>
        <van-field
          v-model="userForm.username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="userReg"
        />
        <van-field
          v-model="userForm.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="pawsReg"
        />
      </van-cell-group>
      <!-- 提交 -->
      <div class="formButton">
        <van-button round block type="primary" @click="postUserInfo" native-type="submit">提交</van-button>
        <div class="newUser"></div>
      </div>
    </van-form>
    <!-- 注册 -->
    <div class="register">
      <van-button type="default" size="mini" plain>忘记密码</van-button>
      <van-button type="default" @click="registerShow=!registerShow" size="mini" plain>快速注册</van-button>
    </div>

    <!-- 注册弹出层 -->
    <van-popup closeable v-model="registerShow" position="bottom" :style="{ height: '90%' }">
      <van-form>
        <van-cell-group inset>
          <!-- 手机号 -->
          <van-field
            v-model="registerForm.phoneNum"
            :rules="phoneReg"
            placeholder="手机号"
            label="手机号"
            ref="phoneRef"
          />
          <!-- 短信验证码 -->
          <van-field v-model="registerForm.verify" placeholder="短信验证码" label="短信验证码">
            <!-- 验证码按钮 -->
            <template #button>
              <van-button
                size="small"
                @click="registerForms"
                v-model="registerForm.verify"
                color="#f96c2f"
                ref="verifyRef"
              >发送验证码</van-button>
            </template>
          </van-field>
          <!-- 注册提交 -->
          <van-button
            class="popupBtn"
            @click="postNumBtn"
            round
            block
            type="primary"
            native-type="submit"
          >提交</van-button>
        </van-cell-group>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

import { Login } from '@/api/api.js'
export default {
  name: 'YscShopLogin',

  data () {
    return {
      // 登陆用户信息
      userForm: {
        username: '15237662486',
        password: '15237662486'
      },
      // 登陆正则
      userReg: [
        { required: true, message: '请填写用户名' },
        { pattern: /^[a-zA-Z0-9_-]{3,12}$/, message: '请输入3-12之间的用户名' }
      ],
      pawsReg: [
        { required: true, message: '请填写用户密码' },
        { pattern: /^[a-zA-Z0-9_-]{6,15}$/, message: '请输入6-15之间的用户名密码' }
      ],
      phoneReg: [
        { required: true, message: '请填写手机号' },
        { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请输入正确的手机号' }
      ],
      // 注册弹出层
      registerShow: false,
      // 忘记密码弹出层
      forgetShow: false,
      // 注册表单
      registerForm: {
        phoneNum: '15237662486',
        verify: ''
      }
    };
  },
  created () {
    // 获取本地数据
    // window.localStorage.setItem('userInfo', JSON.stringify(res.data))
  },
  mounted () {

  },

  methods: {
    ...mapMutations(['setUserInfo']),
    // 返回主页面
    onClickLeft () {
      // this.$bus.$emit('Back', false)
      this.$router.back()
    },
    // 登陆提交form
    setLoginForm () {

    },
    // 验证码
    registerForms () {
      let verifyNum = [];
      for (let index = 0; index < 4; index++) {
        verifyNum.push(Math.floor(Math.random() * 9))
      }
      this.registerForm.verify = verifyNum.join('')

    },
    // 提交用户手机号
    async postNumBtn () {
      // 判断是否有验证码
      if (!this.registerForm.verify) {
        this.$toast.fail('请先获取验证码');
        return
      }
      // 提交用户信息
      const { data: res } = await Login({ phone: this.registerForm.phoneNum })
      // 返回首页
      // console.log(1);
      console.log(res);
      if (res.data.code !== 200) return this.$toast.success('验证失败');
      this.registerShow = false;
      this.$toast.success('注册成功');
      this.$router.back()
      // 登陆成功
      this.setUserInfo(res.data)
      // 存储数据
      window.localStorage.setItem('userInfo', JSON.stringify(res.data))
      // 创建本地地址
      window.localStorage.setItem('addressList', JSON.stringify([]))
    },
    // 提交用户登陆信息
    async postUserInfo () {
      const { data: res } = await Login({
        username: this.userForm.username,
        password: this.userForm.password,
      })
      if (res.data.code !== 200) return this.$toast.fail('验证失败');
      // 登陆成功
      this.setUserInfo(res.data)
      // 提示
      this.$toast.success('登陆成功');
      this.$router.back()
      // 存储数据
      window.localStorage.setItem('userInfo', JSON.stringify(res.data))
      // 创建本地地址
      window.localStorage.setItem('addressList', JSON.stringify([]))
    }
  },
};
</script>

<style lang="less" scoped>
.van-form {
  margin-top: 20px;
}
// 注册
.register {
  height: 40px;
  display: flex;
  justify-content: space-between;
  padding: 0px 20px;
  box-sizing: border-box;
  align-items: center;
  .van-button {
    border: none;
    background-color: transparent;
    font-size: 12px;
  }
}
.formButton {
  margin-top: 10px;
  box-sizing: border-box;
  padding: 0px 20px;
  .van-button {
    border: none;
    background: linear-gradient(to left bottom, #f9956a, #fa8547, #ffa76b);
  }
}
// 弹出层
.van-popup {
  background-color: #f5f9fa;

  .van-form {
    margin-top: 50px;
    .popupBtn {
      margin-top: 10px;
      margin-bottom: 10px;
      border: none;
      background: linear-gradient(to left bottom, #f9956a, #fa8547, #ffa76b);
    }
  }
}
</style>